import {
  type SlateElementProps,
  type TCaptionProps,
  type TImageElement,
  type TResizableProps,
} from "platejs";

import { NodeApi, SlateElement } from "platejs";

import { cn } from "@/lib/utils";

export function ImageElementStatic(
  props: SlateElementProps&lt;TImageElement & TCaptionProps & TResizableProps&gt;,
) {
  const { align = "center", caption, url, width } = props.element;

  return (
    &lt;SlateElement {...props} className="py-2.5"&gt;
      &lt;figure className="group relative m-0 inline-block" style={{ width }}&gt;
        <div style="{{">
          {/** biome-ignore lint/performance/noImgElement: This is a valid use case */}
          <img alt="{props.attributes.alt" src />
          {caption && (
            &lt;figcaption className="mx-auto mt-2 h-[24px] max-w-full"&gt;
              {NodeApi.string(caption![0]!)}
            &lt;/figcaption&gt;
          )}
        </div>
      &lt;/figure&gt;
      {props.children}
    &lt;/SlateElement&gt;
  );
}
